import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { AntDesign } from '@expo/vector-icons';
import { Ionicons } from '@expo/vector-icons';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import Home from './Home';
import Dream from './Dream';
import Shop from './Shop';
import User from './User';
import '../global';

const Tab = createBottomTabNavigator();

const TabBar = () => (
    <Tab.Navigator
        screenOptions={{
            headerStyle: { backgroundColor: '#ffdb2c' },
            headerTintColor: 'white',
            tabBarActiveTintColor: '#ffdb2c',
            tabBarInactiveTintColor: 'rgb(76,76,76)',
            tabBarLabelStyle: { fontSize: 14 },
            headerTitleAlign: 'center',
            tabBarStyle: { backgroundColor: 'rgb(255,255,255)', height: 0.06 * h }
        }}
    >
        <Tab.Screen
            options={{
                headerShown: false,
                title: '首页',
                tabBarIcon: ({ color, size }) => (
                    <AntDesign name='home'
                        color={color}
                        size={size}
                    />
                )
            }}
            name='Home'
            component={Home}
        />
        <Tab.Screen
            options={{
                title: '商城',
                tabBarIcon: ({ color, size }) => (
                    <MaterialCommunityIcons name="shopping-outline"
                        size={size}
                        color={color}
                    />
                )
            }}
            name='Shop'
            component={Shop}
        />
        <Tab.Screen
            options={{
                title: '灵感',
                tabBarIcon: ({ color, size }) => (
                    <Ionicons name="ios-planet-outline"
                        size={size}
                        color={color}
                    />
                )
            }}
            name='Dream'
            component={Dream}
        />
        <Tab.Screen
            options={{
                title: '我的',
                tabBarIcon: ({ color, size }) => (
                    <AntDesign name='user'
                        color={color}
                        size={size}
                    />
                )
            }}
            name='User'
            component={User}
        />
    </Tab.Navigator>
)

export default TabBar;